import {
  Component
} from 'react';

import {
  Group,
  Boxs,
  List,
  Button,
  Badge,
  Avatar,
  ScrollList
} from 'saltui';

const {
  HBox,
  Box
} = Boxs;
const {
  IconButton,
  ButtonGroup,
} = Button;

import './PageDemo.less';

class Item extends Component {
  render() {
    return (
      <div className="demo-item">{this.props.title}</div>
    );
  }
}

export default class PageHome extends Component {

  constructor(props) {
    super(props);
    this.state = {};

  }

  render() {

    const t = this;
    const ReplyComment = React.createClass({
      getInitialState: function() {
        return {
          show: false
        };
      },
      handleClick: function(event) {
        this.setState({
          show: !this.state.show
        });
      },
      render: function() {
        return (
          <div>
              <Group.List lineIndent={50}>
                 <div className="dd-t-list-wrap" >
                    <HBox vAlign="center">
                      <HBox flex={1}  className="t-FBAC">
                        <Box  className="t-list-img">
                          <Avatar name="李贝贝" defaultColor={'#F6BF26'} size={30} style={{ fontSize:12}}/>
                        </Box>
                        <Box className="dd-t-list-text-content" flex={1}>
                            <div className="t-list-title t-omit t-LH1_4">
                              <span>李贝贝</span>
                            </div>
                            <div className="dd-t-list-time">
                            2018-4-12 17:54:00
                            </div>
                        </Box>
                      </HBox>
                      <Box>
                      <i className="iconfont icon-forum t-FCc t-FS14"></i>
                      </Box>
                    </HBox>
                    <Box className="t-LH1_5 t-ML38">这里是回帖内容，回帖内容。</Box>

                    
                  </div>
                  <div className="dd-t-list-wrap" onClick={this.handleClick}>
                    <HBox vAlign="center">
                      <HBox flex={1}  className="t-FBAC">
                        <Box  className="t-list-img">
                          <Avatar name="李贝贝" defaultColor={'#F6BF26'} size={30} style={{ fontSize:12}}/>
                        </Box>
                        <Box className="dd-t-list-text-content" flex={1}>
                            <div className="t-list-title t-omit t-LH1_4">
                              <span>李贝贝</span>
                            </div>
                            <div className="dd-t-list-time">
                            2018-4-12 17:54:00
                            </div>
                        </Box>
                      </HBox>
                      <Box>
                      <i className="iconfont icon-forum t-FCc t-FS14"></i>
                      </Box>
                    </HBox>
                    <Box className="t-LH1_5 t-ML38">这里是回帖内容，回帖内容。</Box>

                  </div>
              </Group.List>
              <div className={this.state.show ? '': 't-DN'}>
                <div className="apply-box t-FBH">
                  <div className="dd-input"></div>
                  <i className="iconfont icon-forum t-FCd t-LH1_6"></i>
                  <Badge count={5}>
            <a href="#1" className="demo-item" />
          </Badge>
                </div>
              </div>
              
            </div>
        )
      }
    });

    return (
      <div className="t-PB68" style={{height: '500px'}}>
        <ScrollList
          //url={'https://www.easy-mock.com/mock/5a2f75a26ce8af6869ec49f0/saltui/scroll-list-data?jsonp_param_name=callback&callback=jsonpCallbak&pageNum=${page}&pageSize=${size}&rnd=${now}'}
          url={'https://www.easy-mock.com/mock/5aead2fec7448d5203a48f6d/example/listInfo'}
          dataType="json"
          pageSize={10}
          beforeFetch={(data) => {
            debugger;
            return data;
          }}
          processData={(data) => {
            debugger;
            return data;
          }}
        >
          <div>this is a Box</div>
           <Item />
        </ScrollList>
      </div>)
  }
}